<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="活动名称">
                <el-input v-model="job.title"></el-input>
            </el-form-item>
            <el-button type="primary" @click="create(job)">添加</el-button>
        </el-form>
        <ul>
        <JobBox v-for="(item,index) in jobs"  :model="item"></JobBox>
        </ul>

    </div>

</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import JobBox from '@/components/JobBox.vue'

    export default {
        name: "Job",
        data() {
            return {
                job: {title: "", content: "",},
            }
        },
        components: {
            JobBox
        },
        computed: {
            ...mapState({
                // 箭头函数可使代码更简练
                jobs: state => state.jobs,
            })
        },
        methods: {
            ...mapActions([
                'createJob',
                'listJobs'
            ]),
            create(job) {
                this.createJob(job)
                this.job = {title: "", content: ""}
            },
        },

        created: function () {
            this.listJobs();
        }
    }
</script>

<style scoped>

</style>